<template>
     <div class='cxo'>
        <v-header title='全集团HR数据看板'></v-header>
        <section class="detail" v-if='res'>
             <ul >
            <li>
                <h2>{{res.headquarters.empcount}}</h2>
                <p>在职员工数</p>
                <i class="fa fa fa-users"></i>
               
                 <a @click="showDialog('D')">
                    详情
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </li>
            <li>
                <h2>{{res.headquarters.add_tomonempcount}}</h2>
                <p>HR系统本月入职</p>
                <i class="fa fa-user-plus"></i>
                 <a @click="showDialog('A')">
                    详情
                    <i class="fa fa-arrow-circle-right"></i>
                </a>

            </li>
            <li>
                <h2>{{res.headquarters.quitcount}}</h2>
                <p>HR系统本月离职</p>
                <i class="fa fa-user-times"></i>
                 <a @click="showDialog('B')">
                    详情
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </li>
        </ul>
        <el-dialog  
          size=''
          :visible.sync="dialogTableVisible" 
          top='8vh'
          >
          <el-table
            :data="tableData"
            style="width:800px"
            stripe
            >
            <el-table-column property="emplid"  label="员工编号"></el-table-column>
            <el-table-column property="name" label="姓名"></el-table-column>
            <el-table-column property="dept_descr" width="300" label="所在部门"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button 
                   size="mini"
                   type="primary" @click="ComputedEmplid(scope)">员工履历表</el-button>
              </template>
            </el-table-column>
          </el-table> 

    
          <el-pagination
              @current-change='currentChange'	
              :page-size="6"
              layout="total, prev, pager, next"
              :total="total"
               style='margin-top:20px;padding:0px;margin-left:-6px'
              >
            </el-pagination>
           <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogTableVisible = false">关闭</el-button>
          </span>
        </el-dialog>
        </section>
         <echart-list :res='res' v-if='res' title='全集团HR数据看板'></echart-list>
        <v-footer></v-footer>
    </div>
</template>
<script>
import Vue from "vue";
import Header from "../dataLookCommon/_header";
import Detail from "../dataLookCommon/_detail";
import echartList from "../dataLookCommon/echartList";
import Footer from "../dataLookCommon/_footer";
import URL from "../../common/js/dataLookUrl";
import { Table, TableColumn, Dialog, Button, Pagination } from "element-ui";
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Dialog);
Vue.use(Button);
Vue.use(Pagination);
export default {
  components: {
    "v-header": Header,
    "v-detail": Detail,
    echartList,
    "v-footer": Footer
  },

  data () {
    return {
      res: "",
      tableData: [],
      total: 0,
      dialogTableVisible: false,
      types: ''
    };
  },
  created () {
    this.sendAjax();
  },
  methods: {
    ComputedEmplid: function (data) {
      localStorage.setItem('resumeType', 2)
      localStorage.setItem('em', data.row.emplid)
      window.open('module/resume.html');
    },
    sendAjax () {
      this.Axios
        .Post(URL.geteheadquartersEmpBydata.url)
        .then(res => (this.res = res.data.datas));
    },
    showDialog (types) {
      if (types) {
        this.types = types
      }
      let params = {
        type: this.types,
        pageNum: 1,
        pageSize: 6
      }

      this.Axios
        .Post(URL.getquarterEmpTypeBylist.url, params)
        .then(res => {
          this.tableData = res.data.datas
          this.total = res.data.total;
        });


      this.dialogTableVisible = true;

    },

    currentChange (data) {

      let params = {
        type: this.types,
        pageNum: data,
        pageSize: 6
      }

      this.Axios
        .Post(URL.getquarterEmpTypeBylist.url, params)
        .then(res => {
          this.tableData = res.data.datas
          this.total = res.data.total;
        });
    }

  }
};
</script>

<style scoped>
.cxo {
  overflow-x: hidden;
}
.detail ul {
  overflow: hidden;
}
a {
  cursor: pointer;
}
.detail ul li {
  height: 130px;
  margin-right: 32px;
  float: left;
  padding-left: 12px;
  padding-top: 10px;
  position: relative;
  width: 31%;
}
.detail ul li:first-of-type {
  background: #00c0ef;
}
.detail ul li:nth-of-type(2) {
  background: #00a65a;
}
.detail ul li:nth-of-type(3) {
  background: #f39c12;
}
.detail ul li:last-of-type {
  margin-right: 0;
  background: #dd4b39;
}

.detail li h2 {
  font-size: 38px;
  font-weight: bold;
  margin: 0 0 10px 0;
  white-space: nowrap;
  padding: 0;
  color: #fff;
}

.detail li p {
  color: #fff;
  margin: 0 0 10px;
  font-size: 15px;
}

.detail li a {
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.15);
  text-align: center;
  padding: 3px 0;
  font-size: 14px;
}

.detail li a:hover {
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 1);
}

.detail li > i {
  transition: all 0.3s linear;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1110;
  font-size: 70px;
  color: rgba(0, 0, 0, 0.15);
}

.detail li > i:hover {
  font-size: 75px;
}
</style>